<template>
  <div v-drag class="coordinate">
    <div class="panelWrap coo-wrap">
      <div class="coo-title title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>选择坐标</div>
        <i class="el-icon-close" @click="handleCloseCoordinate" />
      </div>
      <div class="con co-map" style="background: #ffffff;">
        <div class="coo-search flex flexac searchSite p-t-15 p-b-15">
          <label class="inputLable m-l-15">
            关键词：
            <input v-model="keyword" />
          </label>
          <label class="inputLable m-l-15">
            地区：
            <input v-model="location" />
          </label>
          <el-button class="defaultbtn saveBtn m-l-20" @click="handleSave">确定位置</el-button>
        </div>
        <baidu-map id="coordinate" class="bm-view co-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" ak="k007NSYtuZzFz0PnG8YifooN4UmeTXlp" @click="getClickInfo" @ready="handler">
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-local-search class="sdasdasdsa co-bottom" :keyword="keyword" :auto-viewport="true" :location="location" :page-capacity="pageCapacity" @markersset="getMarkersset" @infohtmlset="getInfohtmlset" />
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
//  import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map'
import MapView from "vue-baidu-map/components/map/MapView.vue";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import bus from "@/utils/bus";
function monitor(){
  console.log(111)
  this.$emit('monitor',this.data.elevatorId)
}
export default {
  name: "Map",
  components: {
    BaiduMap
  },
  directives: {
    drag(el, bindings) {
      // console.log(el)
      el.onmousedown = function (e) {
        var disx = e.pageX - el.offsetLeft;
        var disy = e.pageY - el.offsetTop;
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + "px";
          el.style.top = e.pageY - disy + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        };
      };
    }
  },
  data() {
    return {
      data:{},
      center: { lng: 116.404, lat: 39.915 },
      // center: { lng: 110.404, lat: 40.915 },
      zoom: 3,
      location: "长沙市",
      keyword: "长沙市岳麓区",
      address: {
        province: "",
        city: "",
        title: ""
      },
      pageCapacity: 4
    };
  },
  mounted() {
    // coordinate
    // console.log(document.documentElement.clientWidth)
    const clientWidth = document.documentElement.clientWidth;
    if (clientWidth <= 1366) {
      this.pageCapacity = 3;
    }
    window.onload = function () {
      var drag = document.getElementById("coordinate");
      // //点击某物体时，用drag对象即可，move和up是全局区域，
      // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
      drag.onmousedown = function (event) {
        var e = event || window.event; // 兼容IE浏览器
        //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
        var diffX = e.clientX - drag.offsetLeft;
        var diffY = e.clientY - drag.offsetTop;
        if (typeof drag.setCapture !== "undefined") {
          drag.setCapture();
        }
        document.onmousemove = function (event) {
          var e = event || window.event;
          var moveX = e.clientX - diffX;
          var moveY = e.clientY - diffY;
          if (moveX < 0) {
            moveX = 0;
          } else if (moveX > window.innerWidth - drag.offsetWidth) {
            moveX = window.innerWidth - drag.offsetWidth;
          }
          if (moveY < 0) {
            moveY = 0;
          } else if (moveY > window.innerHeight - drag.offsetHeight) {
            moveY = window.innerHeight - drag.offsetHeight;
          }
          drag.style.left = moveX + "px";
          drag.style.top = moveY + "px";
        };
        document.onmouseup = function (event) {
          this.onmousemove = null;
          this.onmouseup = null;
          // 修复低版本ie bug
          if (typeof drag.releaseCapture !== "undefined") {
            drag.releaseCapture();
          }
        };
      };
    };
  },
  methods: {
    getBaiduMap(jd, wd, data) {
      this.data = data
      // $('#container').show();
      // $('.dtxq').hide();
      // $('.jyjjBox').hide();
      // $('.top').show();
      /**
       * 百度地图
       * */
      var map = new BMap.Map("coordinate"); // 创建Map实例
      console.log(map);
      var point = new BMap.Point(jd, wd); // 创建点坐标
      map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
      map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
      });
      if (data) {
        console.log(data);
        var opts = {
          // width: 280, // 信息窗口宽度
          // height: 500, // 信息窗口高度
          title: "电梯报警信息" // 信息窗口标题
        };
        

        var infoWindow = new BMap.InfoWindow(
          `<p class="addre">救援识别码：` + data.rescueCode +`</p>  
          <p class="addre">电梯注册码：` + data.registerCode +`</p>  
          <p class="addre">电梯地址：` + data.useUnitAddress +`</p>
          <p class="addre">使用单位：` + data.useUnitName +`</p>
          <p class="addre">维保单位：` + data.maUnitName +`</p>
          <p class="addre">维保管理人：` + data.maChargePerson +`</p>
         
          <p class="addre">故障时间：` + data.ctrData +`</p>
          <p class="addre">故障描述：` + data.itemName +`</p>
          <p class="addre btns" style="text-align:center">
            <button type="button" id="monitor" class="b1">查看监控</button>
            <button type="button" class="b2">电梯档案</button>
            <button type="button" id="emergency" class="b3">应急救援详情</button>
          </p>`,
          opts
        ); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
        console.log(point);
      } else {
      }

      var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL };
      map.addControl(new BMap.NavigationControl(opts));
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
      // local = new BMap.LocalSearch(map, {
      //   renderOptions: { map: map }
      // });
      setTimeout(()=>{
        let that = this
        let m = document.getElementById("monitor");
        let e = document.getElementById("emergency");
        e.addEventListener('click',function(){
          that.$emit('emergency',that.data)
        })
        m.addEventListener('click',function(){
          that.$emit('monitor',that.data.elevatorId)
        })
      },200)
      
      
    },
    handleSave() {
      // console.log(this.center, this.address)
      bus.$emit("sendCoordinate", this.center);
      bus.$emit("sendCoordinateAddress", this.address);
    },
    getInfohtmlset(e) {
      console.log("getInfohtmlset");
      console.log(e);
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
      this.address.province = e.province;
      this.address.city = e.city;
      this.address.title = e.title;
    },
    getMarkersset(e) {
      // console.log('getMarkersset')
      // console.log(e)
    },
    getClickInfo(e) {
      // console.log(e.point.lng)
      // console.log(e.point.lat)
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    handleClickMap() {
      // console.log('点击了地图')
      // console.log(res)
    },
    handler({ BMap, map }) {
      console.log(BMap.Point);
      console.log(map);
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 18;
    },
    handleCloseCoordinate() {
      bus.$emit("closeCoordinate");
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
#coordinate {
  .btns button{
    padding: 5px 10px;
    border-radius: 5px;
    border:none;
    color: #fff;
    cursor: pointer;
  }
  .b1{
    background: var(--panelWrapTitle);
  }
  .b2{
    background: #ff6600;
  }
  .b3{
    background: #ff0000;
  }
  margin-left: -100px;
  .coo-wrap {
    min-width: 900px;
    height: 400px;
    .bm-view {
      width: 100%;
      height: 400px;
    }
    .inputLable input {
      width: 235px !important;
      height: 28px;
      border-style: solid;
      border-width: 1px;
      border-color: var(--inputbc);
      overflow: auto;
      border-radius: 0;
      border-radius: 3px;
    }
    .sdasdasdsa {
      background: #ffffff;
      width: 900px;
      border-radius: 5px;
      margin-left: -1px;
    }
  }
}
</style>
